<template>
	<div class="aboutme">
		<div class="user_info">
			<div class="avatar">
				<img
					:src="formData.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"
					alt="头像"
					class="avatar_img"
				/>
				<el-link type="primary">编辑头像</el-link>
			</div>
			<el-form ref="formRef" :model="formData" :rules="rules" label-width="60px">
				<el-form-item label="角色" prop="account">
					<el-input v-model="formData.account" disabled />
				</el-form-item>
				<el-form-item label="昵称" prop="nickName">
					<el-input v-model="formData.nickName" />
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-radio-group v-model="formData.sex">
						<el-radio v-for="item in sys_user_sex" :key="item.id" :label="item.value">{{ item.label }}</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="职业" prop="occupation">
					<el-input v-model="formData.occupation" />
				</el-form-item>
				<el-form-item label="微信" prop="wechat">
					<el-input v-model="formData.wechat" />
				</el-form-item>
			</el-form>
			<div class="handle_btn">
				<el-button type="primary" @click="handleSubmit">保 存</el-button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import { useLoginStore } from '@/store/login/login'
import { rules } from './config'

const { proxy } = getCurrentInstance() as any
const { sys_user_sex } = proxy.$useDict('sys_user_sex')
// console.log(sys_user_sex)

const loginStore = useLoginStore()
const { userInfo } = loginStore
const formData = ref<any>({})
const keys = Object.keys(userInfo)
const formRef = ref()
for (const key of keys) {
	formData.value[key] = userInfo[key]
}

function handleSubmit() {
	formRef.value.validate(async (valid: boolean) => {
		if (valid) {
			console.log('保存信息')
		}
	})
}
</script>

<style lang="less" scoped>
.aboutme {
	display: flex;
	justify-content: center;
}
.user_info {
	display: flex;
	flex-direction: column;
	width: 400px;
	background: #fff;
	border-radius: 5px;
	padding: 20px;
	.handle_btn {
		text-align: right;
	}
}
.avatar {
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	margin-bottom: 30px;
	.avatar_img {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		margin-bottom: 10px;
	}
}
</style>
